<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>码溜挪车</title>
    <link rel="stylesheet" href="__TMPL__Nuoche/Public/css/ui-media.css"/>

    <style>
        .b{
            background-image: url(__TMPL__Nuoche/Public/images/bg-04.png);
            font-size: 0.78rem;
            font-family: PingFangSC-Medium, sans-serif;
        }
        .wz{
            color: #FFFFFF;
            margin-left: 1.5rem;
        }
        .sjInput{
            width:15.37rem;
            height:2.90rem;
            border-radius: 2.77rem;
            background-color:white;
            background-image:url(__TMPL__Nuoche/Public/images/retel-01.png);
            background-repeat: no-repeat;
            background-position:1.05rem;
            margin-top: 0.416rem;
            margin-left:auto;
            margin-right:auto;
        }
        .sjInput input{
            width: 12.77rem;
            background: transparent;
            padding-left: 3.05rem;
            vertical-align: top;
            border: 0;
            height: 100%;
            outline: none;
            font-size: 1.2rem;
        }

        .carInput{
            width:15.37rem;
            height:2.90rem;
            border-radius: 2.77rem;
            margin-left:auto;
            margin-right:auto;
            margin-top: 0.416rem;
            vertical-align: top;
            font-size: 1.2rem;
            position: relative;
        }
        /*.carInput input{*/
            /*width: 12.77rem;*/
            /*background: transparent;*/
            /*padding-left: 3.05rem;*/
            /*vertical-align: top;*/
            /*border: 0;*/
            /*height: 100%;*/
            /*outline: none;*/
            /*font-size: 1.2rem;*/
        /*}*/
        #caricon{
            width:3rem;
            height:2.90rem;
            background-image:url(__TMPL__Nuoche/Public/images/recar-01.png);
            background-repeat: no-repeat;
            background-color:white;
            background-position:0.819rem;
            float: left;
            border-radius: 2.77rem 0  0 2.77rem;
        }
        #car-city{
            position:absolute;
            left: 3.3rem;
            width: 2rem;
            height: 2.90rem;
            line-height: 2.90rem;
            text-align: center;
            color: grey;
            background-color: white;
        }
        .input_platenumber_base{
            position:absolute;
            width:9.77rem;
            height: 100%;
            border:none;
            outline:0;
            left: 5.6rem;
            top: 0px;
            font-size: 1.2rem;
            padding: 0 0 0 2px;
            border-radius: 0 2.77rem 2.77rem 0;
            text-transform: uppercase;
        }
        .sj{
            width:15.37rem;
            margin-top: 1rem;
            margin-left:auto;
            margin-right:auto;
        }
        .car{
            width:15.37rem;
            margin-top: 1rem;
            margin-left:auto;
            margin-right:auto;
        }
        .vc{
            width:15.37rem;
            margin-top: 1rem;
            margin-left:auto;
            margin-right:auto;
        }

        .vcInput{
            width:15.37rem;
            height:2.90rem;
            border-radius: 2.77rem;
            background-color:white;
            background-image:url(__TMPL__Nuoche/Public/images/ys-01.png);
            background-repeat: no-repeat;
            background-position:0.819rem;
            margin-left:auto;
            margin-right:auto;
            margin-top: 0.416rem;
            position: relative;

        }
        .vcInput input{
            width: 8.77rem;
            background: transparent;
            padding-left: 3.05rem;
            vertical-align: top;
            border: 0;
            height: 100%;
            outline: none;
            font-size: 1.2rem;
        }

        .tjan{
            margin-top: 2.49rem;
            margin-left:auto;
            margin-right:auto;
            width:18.89rem;
            height:2.78rem;
            background-image:url(__TMPL__Nuoche/Public/images/tj-01.png);
            background-size: 18.89rem;
        }

        .hqCode{
            position:absolute;
            width:2.45rem;
            height:2.45rem;
            top:0.251rem;
            right:0.31rem;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            background:#33ccff;
            color: #fff;
            text-align: center;
            font-size: 0.8rem;
            font-family: PingFangSC-Semibold, sans-serif;
        }
        .hqzt{
            line-height: 1.2rem;
        }
        .szzt{
            line-height: 2.4rem;
        }

       
        #footerbox{
            color:#fff;
            height:30px;
            width: 10rem;
            left: 50%;
            margin-left:-5rem;
            position:fixed;
            bottom:1rem;
            text-align:center;
            line-height: 0.86rem;
        }

        .tb{
            width:5.66rem;
            margin-left:auto;
            margin-right:auto;
            margin-top: 2.33rem;
        }
        .tbb{
            width: 5.66rem;
            height: 1.77rem;
        }

        .sysm{
            position: absolute;
            right: 1rem;
            top:1.2rem;

            float: right;
            color: #FFFFFF;
        }
        .sy{
            color: #FFFFFF;
        }
    </style>
</head>
<body class="b">
    <form id="regInfo" class="form-horizontal js-ajax-form" action="{:leuu('Nuoche/Company/nuoche')}" method="post">
        <input type="hidden" id="nid" value="{$nid}" name="nid">
        <input type="hidden" id="ncode" value="{$ncode}" name="ncode">

        <div class="sysm"><a href="{:leuu('Nuoche/Company/introd')}" class="sy">使用说明</a> </div>

        <div class="tb"><img class="tbb" src="__TMPL__Nuoche/Public/images/mlnc.png"></div>
        
        <div class='sj'>
            <span class="wz">手机号/Cell-phone number</span>
        </div>

        <div class="sjInput">
            <input type="text" name="telNum" id='telNum'>
        </div>

        <div class='car'>
            <span class="wz">车牌号/License plate number</span>
        </div>

        <!--<div class="carInput">-->
            <!--<input type="text" name="plateNum" id='plateNum'>-->
        <!--</div>-->
        <div class="carInput">
            <div id="caricon"></div>
            <div id="car-city" onclick="provinceSelecct()">省</div>
            <input id="id_car_number" class="input_platenumber_base" type="text">
            <div id="id_keyboard_province"></div>
            <input type="hidden" id="plateNum" name="plateNum">
        </div>

        <div class='vc'>
            <span class="wz">验证码/Verification Code</span>
        </div>

        <div class="vcInput">
            <input type="text" name="vCode" id='vCode'>
            <div class="hqCode"><span class="hqzt" id="vcDjs">点击<br/>获取</span></div>
        </div>
        <div class='tjan' id="tjan"></div>

    </form>
<div id='footerbox'>
    &nbsp;本服务由大友印相提供<br>
    客服电话：0377-8386&nbsp;7777
</div>
</body>
<script type="text/javascript" src="__TMPL__Qrcode/Public/js/jquery.min.js"></script>
<script type="text/javascript">
    $("#tjan").click(function () {
        var telNum = $('#telNum').val();
        var vCode = $('#vCode').val();
        if(telNum==""||telNum==null){
            alert("请输入电话号码");
            return;
        }
        if(vCode==""||vCode==null){
            alert("请输入验证码");
            return;
        }

        var id_car_number = $('#id_car_number').val();
        id_car_number = id_car_number.toUpperCase();
        var car_city = $('#car-city').html();
        var plateNum = car_city + id_car_number;
        $("#plateNum").val(plateNum);
        plateNum = plateNum.toUpperCase();
        if(car_city=="省"||car_city==null){
            alert("请点击'省'输入简称");
            return;
        }

        $("#regInfo").submit();
    });
    var regcountdown = 90;
    function regsmstimecount(obj) {
        if (regcountdown == 0) {
            obj.removeClass('szzt');
            obj.addClass('hqzt');
            obj.html('点击<br/>获取');
            regcountdown = 90;
        } else {
            obj.text(regcountdown + "s");
            regcountdown--;
            setTimeout(function() {
                regsmstimecount(obj);
            }, 1000);
        }
    }

    $(".hqzt").click(function () {
        if(regcountdown == 90){
            var telNum = $('#telNum').val();
            var id_car_number = $('#id_car_number').val();
            id_car_number = id_car_number.toUpperCase();
            var car_city = $('#car-city').html();
            var plateNum = car_city + id_car_number;
            plateNum = plateNum.toUpperCase();
            var nid = $('#nid').val();

            if(telNum==""||telNum==null){
                alert("请输入电话号码");
                return;
            }

            if(plateNum==""||plateNum==null){
                alert("请输入车牌号");
                return;
            }

            if(car_city=="省"||car_city==null){
                alert("请点击'省'输入简称");
                return;
            }
            var data = {type: 4, mobile : telNum, nid: nid, platenum: plateNum};
            $.getJSON("{:leuu('api/mobileverify/send_yuyinVCode')}", data, function(response) {
                if(response.status == 1 && response.info == 'ok') {
                    alert('发送成功，请保持电话畅通！');
                    var sendbtn = $('#vcDjs');
                    sendbtn.removeClass('hqzt');
                    sendbtn.addClass('szzt');
                    regsmstimecount(sendbtn);
                } else {
                    alert(response.info);
                }
            });
        }else{
            alert('('+regcountdown+'s)后重新发送');
        }
    });
</script>
<script type="text/javascript">
    $(function(){
        var mHeight = $(document).height();
        $(window).resize(function () {
            if($(document).height() < mHeight){
                $("#footerbox").css({"position":"static","display":"none"});
            }else{
                $("#footerbox").css({"position":"fixed","display":"block"});
            }
        });
    });
</script>
<script>
    //省份数组
    var provinces = new Array("京","沪","浙","苏","粤","鲁","晋","冀","豫","川","渝","辽","吉","黑","皖","鄂","津","贵","云","桂","琼","青","新","藏","蒙","宁","甘","陕","闽","赣","湘");
    //点击省份输入框时
    function provinceSelecct() {
        showProvince();
    }
    //绘制省份虚拟键盘 每个键默认高48 宽42 起始位置（9,12）
    function  showProvince() {
        var screenWidth = window.screen.width;
        var columns = Math.floor((screenWidth-9)/42);
        var rows = Math.ceil(31/columns);

        var key_bg_height = rows*48+16;
        var x_space = (screenWidth - 9 - 42*columns)/(columns);
        var start_x = 9+x_space;
        var start_y = 12;

        var keyboard_province = document.getElementById("id_keyboard_province");
        keyboard_province.style.position="fixed";
//      keyboard_province.style.top= (window.screen.height-key_bg_height)+"px";
        keyboard_province.style.bottom= 0;
        keyboard_province.style.left=0;
        keyboard_province.style.backgroundColor="gray";
        keyboard_province.style.width="100%";
        keyboard_province.style.height=key_bg_height+"px";
        keyboard_province.style.zIndex=99;

        for(var i=0;i<rows;i++){
            for(var j=0;j<columns;j++){
                var provinceIds = i*columns+j;
                if(provinceIds<provinces.length){
                    var x = 9+(j+1)*x_space+j*42;
                    var y = 12+i*48;
                    $("#id_keyboard_province").append(addKeyProvince(x,y,provinceIds));
                }else{
                    keyboard_province.style.display="block";
                    return;
                }
            }
        }
    }
    //绘制键
    function addKeyProvince(x,y,provinceIds) {
        var addHtml = '<div class="diValue" data="'+provinces[provinceIds]+'" style="position: absolute;left:'+x+'px;top:'+y+'px;width: 42px;height: 48px;color: white" onclick="chooseProvince(this);">'+provinces[provinceIds]+'</div >';
        return addHtml;
    }
    //键盘点击显示与隐藏
    function chooseProvince(e){
        var province = e.getAttribute("data");
        console.log(province);
//        var provincetest = $("#car-city").html();
//        console.log(provincetest);
//        $("#car-city").html("233");
        $("#car-city").html(province);
        $("#car-city").css("color","black");
        $("#id_keyboard_province").hide();
//        var str = "D345675";
//        console.log(str.search(/^
//        ([冀豫云辽黑湘皖鲁苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼渝京津沪新京军空海北沈兰济南广成使领]
//        [a-zA-Z](([DF](?![a-zA-Z0-9]*[IO])[0-9]{4})|([0-9]{5}[DF])))|
//        ([冀豫云辽黑湘皖鲁苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼渝京津沪新京军空海北沈兰济南广成使领A-Z]{1}
//        [a-zA-Z0-9]{5}[a-zA-Z0-9挂学警港澳]{1})$/))
    }
</script>
</html>